<template>
  <div class="CampusBinhai">
    输入学号 <input ref="inputId">
    <button type="button" @click="handleButtonClick">确定</button>
    <div v-if="student.id">
      学号：{{ student.id }}<br>
      姓名：{{ student.name }}<br>
      年龄：{{ student.age }}<br>
      专业：{{ student.major }}
    </div>
    <!-- 使用计算属性显示错误信息 -->
    <p v-else-if="hasError">{{ errorMessage }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      student: {
        id: '',
        name: '',
        age: '',
        major: ''
      },
      presetIds: ['123'], // 预设的学号列表，蒋启迪的学号
      // 新增一个变量来控制错误信息的显示
      inputId: ''
    };
  },
  computed: {
    // 计算属性来判断是否有错误及错误信息
    hasError() {
      return !!this.inputId && !this.presetIds.includes(this.inputId);
    },
    errorMessage() {
      return this.hasError ? '错误，请输入学号：123' : '';
    }
  },
  methods: {
    handleButtonClick() {
      this.inputId = this.$refs.inputId.value.trim(); // 获取并去除前后空格
      const isPresetId = this.presetIds.includes(this.inputId);

      if (isPresetId) {
        this.student = {
          id: this.inputId,
          name: '阿巴阿巴',
          age: '8',
          major: '计算机科学与技术'
        };
      } else {
        // 输入的id不正确时，我们不需要重置student对象，因为它已经默认为空
      }
    }
  }
};
</script>

<style scoped>
/* 在这里添加组件的样式 */
</style>